<template>
  <div class="thirdView" :style="transScale">
    <!-- 头部 -->
    <div class="header">
      <div class="title">
        <span>{{ queryInfo.company}}</span>
        <span class="second">- {{ queryInfo.text }}</span>
      </div>
      <!-- <search-view class="searchView"></search-view> -->
      <img class="chilun1" src="../../assets/images/bigViewIMG/chilun1.png" alt="">
      <img class="chilun2" src="../../assets/images/bigViewIMG/chilun2.png" alt="">
      <div class="dateTime">
        <div class="date">{{ date }}</div>
        <div class="time">{{time}}</div>
        <div class="week">{{weekDate}}</div>
      </div>
    </div>
    <!-- 导航 -->
    <div class="breadNav">
      <div class="left">
        <img src="@/assets/images/bigViewIMG2/weizhi.png" alt="">
        <div class="add">当前位置：</div>
      </div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/visual/bigscreen/viewer?reportCode=EArchives_first' }">企业E档案</el-breadcrumb-item>
    
        <el-breadcrumb-item :to="{ path: topath }">档案全景</el-breadcrumb-item>
        <el-breadcrumb-item>收付汇档案</el-breadcrumb-item>
    
      </el-breadcrumb>
    </div>
    <!-- 主体内容 -->
    <div class="main">
      <div class="main-left">
        <div class="main-left-top">
          <Title name="企业对外付汇情况"></Title>
        </div>
       
        
        <div class="main-table">
          <el-table :data="tableData" style="width: 100%" :cell-style="{color:'#fff'}" :header-cell-style="{ color: '#00ffff' }"  v-loading="leftLoad">
              <template slot="empty">
              
                <span style="color:#9d9d9d;font-size: 25px;font-weight: 700;">查无数据</span>
              </template>
            <el-table-column type="index" label="排名">
            </el-table-column>
            <el-table-column prop="etpsNm" label="企业名称" width="200" show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="socialCreditCode" label="社会信用代码" show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="pfcurrAmt" label="付汇金额" show-overflow-tooltip="true">
              <template slot-scope="scope">
                {{ scope.row.pfcurrAmt }}元
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="main-right">
        <div class="main-right-top">
            <Title name="企业对外付汇查询"></Title>
        </div>
        <!-- 搜索 -->
        <div class="search">
          <el-form ref="form" :model="fuHuiForm" inline size="medium">
             
            <el-form-item>
              <el-input v-model="fuHuiForm.rcvechErNm" placeholder="输入收汇人名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="fuHuiForm.ctrtNo" placeholder="输入合同编号"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="fuHuiForm.invoiceNo" placeholder="输入发票编号"></el-input>
            </el-form-item>
           
            <el-form-item>
              <el-date-picker v-model="timeDate" value-format="yyyy-MM-dd" type="daterange" align="right" unlink-panels
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchForm" icon="el-icon-search">查询</el-button>
              <el-button plain @click="clearForm" icon="el-icon-refresh">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 表格 -->
        <div class="main-table">
          <el-table :data="payList" style="width: 100%" :cell-style="{color:'#fff'}" :header-cell-style="{ color: '#00ffff' }" height="650" v-loading="loading">
            <template slot="empty">
            
              <span style="color:#9d9d9d;font-size: 25px;font-weight: 700;">查无数据</span>
            </template>
            <el-table-column type="index"  label="序号">

            </el-table-column>
            <el-table-column prop="rcvechErNm" label="收汇人名称" width="250" show-overflow-tooltip="true">
            </el-table-column>
          
            <el-table-column prop="pfcurrDate" label="支付时间" show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="pfcurrAmt" label="付款金额" show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="pfcurrCurrcd" label="付汇币制代码" show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="etpsNm" label="支付方" show-overflow-tooltip="true">
            </el-table-column>
              <el-table-column prop="socialCreditCode" label="企业社会信用代码" show-overflow-tooltip="true">
            </el-table-column>
          </el-table>

          <div class="bottom-page">
            <el-pagination background layout="prev, pager, next,sizes"
             :total="total" :page-sizes="[10, 20,30, 40]"
              @size-change="handleSizeChange" 
              @current-change="handleCurrentChange">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Title from './components/title.vue'
import { getEntPaymentPage } from '@/api/views/index.js'
import { reqFindEntPayment } from '@/api/home/index.js'
// import searchView from './components/searchView.vue'

import { encrypt, decrypt } from '@/utils/AES.js'
import { getDate, getTime, getWeekDate } from "@/utils/date.js";
export default {
  components:{
    Title,
    // searchView
  },
  data() {
    return {

      client: ["1920", "1080"],
      scale_x: 1,
      scale_y: 1,
      tableData:[
       
      ],
      payList:[
        
      ],
      timeDate:null,
      fuHuiForm:{
       
        rcvechErNm: null,
        ctrtNo: null,
        invoiceNo: null,
        beginDate:null,
        endDate: null,
        page:1,
        size:10,
        
      },
      total:0,
      loading:false,
      leftLoad:false,
      date: "2021-01-01",
      time: "00:00:00",
      weekDate: "星期一",
      timer: null,
    }
  },
  created() {
    this.getTopList()
    this.getPayList()
    // console.log(this.$route.query)
  },
  watch: {
    $route: {
      handler(val) {
        if (val.path == '/visual/thirdView/sandianView') {
          this.getTopList()
          this.getPayList()
        } else {
          return
        }

      },
      deep: true
    }
  },
  computed: {
    queryInfo() {
     let query = JSON.parse(decrypt(this.$route.query.key))
      return query
    },
  
    topath() {
      let query = JSON.parse(decrypt(this.$route.query.key))
      let keyInfo = encrypt(JSON.stringify({
        company: query.company,
        tradeCo: query.tradeCo
      }))
      let code = encodeURIComponent(keyInfo)
      if (!query.company) {
        return '/visual/bigscreen/viewer?reportCode=SecondView'
      } else {

        return `/visual/bigscreen/viewer?reportCode=SecondView&key=${code}`
      }


    },
    transScale() {
      return `transform: scale(${this.scale_x}, ${this.scale_y});
              background-size: 100% 100%;
              transform-origin: left top; 
              overflow: hidden;
              width:${this.client[0]}px;height:${this.client[1]}px;position: absolute;`;
    }
  },
  mounted() {
    this.initClock();
    this.timer = setInterval(() => {
      this.initClock();
    }, 1000);
    window.addEventListener("resize", this.resizeHandler);
    this.resizeHandler();
  },
  methods: {
    initClock() {
      this.date = getDate();
      this.time = getTime();
      this.weekDate = getWeekDate();
    },
  

    // 底部分页 切换一页显示多少条
    handleSizeChange(val){
     
      this.fuHuiForm.size=val
      this.getPayList()
    },
    // 页数切换
    handleCurrentChange(val){
      this.fuHuiForm.page=val
      this.getPayList()
    },
    //获取左边年度对外付汇情况
    async getTopList(){
      this.leftLoad=true
      const res = await reqFindEntPayment({ tradeCo: this.queryInfo.tradeCo })
      // console.log(res);
      if (res.code == 500) {
        this.leftLoad = false
      }
      this.tableData=res.data
      this.leftLoad=false
    },
    // 查询右边对外付汇情况
    async getPayList(){
      this.loading=true
      const res = await getEntPaymentPage({ ...this.fuHuiForm, tradeCo: this.queryInfo.tradeCo })
      if (res.code == 500) {
        this.loading = false
      }
      this.payList = res.data.list
      this.total=res.data.total
      this.loading=false
    },
    clearForm() {
      this.fuHuiForm = {
       
        rcvechErNm: null,
        ctrtNo: null,
        invoiceNo: null,
        beginDate: null,
        endDate: null,
        page: 1,
        size: 10
      }
      this.timeDate=null
      this.searchForm()
    },
    searchForm() {
      if (this.timeDate && this.timeDate.length!==0 ) {
        this.fuHuiForm.beginDate = this.timeDate[0]
        this.fuHuiForm.endDate = this.timeDate[1]
      }
     this.getPayList()
      
    },  
    resizeHandler() {
      this.scale_x = `${document.documentElement.clientWidth}` / this.client[0];
      this.scale_y = `${document.documentElement.clientHeight}` / this.client[1];
    },
    
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
      
    }
    window.removeEventListener("resize", this.resizeHandler);
  },
}
</script>

<style lang="scss" scoped>
.thirdView {
  width: 100%;
  height: 100%;
  background: url('../../assets/images/bigViewIMG/bg.png') no-repeat;
  background-size: 100% 100%;
  // padding: 0 20px;

.header {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;

    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      justify-content: center;

      width: 100%;
      height: 70px;
      background-image: url('../../assets/images/bigViewIMG/navbar.png');
      background-size: 100% 100%;

      span {
        font-size: 32px;
        color: #00ffff;
        font-weight: 400;
      }

      .second {
        margin-left: 5px;
        font-size: 32px;
        color: #00ffff;
        font-weight: 400;
        // font-family: '华文楷体'
      }
    }

    .searchView {
      position: absolute;
      top: 22px;
      left: 23px;
    }

    .chilun1 {
      width: 138px;
      height: 48px;
      position: absolute;
      top: 22px;
      left: 1252px;
    }

    .chilun2 {
      width: 138px;
      height: 48px;
      position: absolute;
      top: 22px;
      left: 506px;
    }

    .dateTime {
      position: absolute;
      top: 20px;
      left: 1575px;
      width: 325px;
      height: 36px;
      display: flex;
      color: #fff;
      // text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 22px;

      .time {
        margin-left: 5px;
      }

      .week {
        margin-left: 5px;
      }
    }
  }
    .breadNav {
      margin-left:10px;
      height:40px;
      display: flex;
      align-items: center;
      
      .left {
        display: flex;
        align-items: center;
  
        img {
          width: 16px;
          height: 16px;
        }
  
        .add {
          margin-left: 10px;
          margin-right: 10px;
          color: #fff;
          font-size: 16px;
        }
      }
  
      ::v-deep .el-breadcrumb {
        .el-breadcrumb__item {
          .el-breadcrumb__inner {
            color: #00ffff;
            font-size: 16px;
          }
  
          .is-link {
            color: #fff;
          }
        }
      }
    }
  .main {
    margin-top: 20px;
    display: flex;
    .main-left {
      // overflow: hidden;
        width: 650px;
        height: 650px;
        // border: #005f95 1px solid;
        .main-left-top {
          padding-top: 0px;
          padding-left: 10px;
          margin-bottom: 20px;
        }
        .main-table {
            margin: 0 10px;
        
            ::v-deep .el-button {
              padding: 6px 8px;
              font-size: 12px;
              border-radius: 6px;
            }
        
            ::v-deep .el-table,
            ::v-deep .el-table__expanded-cell {
              background-color: transparent !important;
        
            }
        
            /* 表格内背景颜色 */
           
            ::v-deep .el-table tr,
            ::v-deep .el-table td {
              background-color: transparent !important;
              border-bottom: none;
            }
            ::v-deep .el-table th {
              background-color: #013689 !important;
              border-bottom: none;
            }
            ::v-deep .el-table td {
              border-bottom: none;
            }
        
            ::v-deep .el-table::before {
              left: 0;
              bottom: 0;
              width: 100%;
              height: 0px;
            }
        
            ::v-deep .el-table {
              .el-table__row {
                .el-table__cell {
                  .cell {
                    div {
                      color: #fff;
                      background-color: #0099d5;
                      text-align: center;
                      border-radius: 5px;
                      font-weight: 900;
        
                    }
        
                  }
        
        
                }
        
                &:nth-child(-n+3) {
                  .cell {
                    div {
                      background-color: #ff560e;
        
                    }
        
                  }
                }
              }
            }
                        ::v-deep .el-loading-mask {
                          background-color: rgba(255, 255, 255, 0);
            
            
                          .el-loading-spinner .circular {
                            width: 30px;
                            height: 30px;
                          }
            
                          .el-loading-spinner .path {
                            stroke: #c23531;
                            stroke-width: 8px;
                          }
                        }
          }
    }
    .main-right {
      margin-left: 40px;
        flex: 1;
        // border: #005f95 1px solid;
        .main-right-top {
            padding-top: 0px;
              padding-left: 10px;
              margin-bottom: 20px;
        }
        .search {
          padding: 0 20px;
          ::v-deep .el-input .el-input__inner {
            height: 36px;
            line-height: 36px;
          }
        
          ::v-deep .el-button {
            padding: 10px 20px;
            font-size: 14px;
            border-radius: 3px;
          }
        }
        .main-table {
          padding: 0 15px;

          ::v-deep .el-button {
            padding: 6px 8px;
            font-size: 12px;
            border-radius: 6px;
          }

          ::v-deep .el-table,
          ::v-deep .el-table__expanded-cell {
            background-color: transparent !important;

          }

          /* 表格内背景颜色 */
         
          ::v-deep .el-table tr,
          ::v-deep .el-table td {
            background-color: transparent !important;
            border-bottom: none;
          }
          ::v-deep .el-table th {
            background-color: #013689 !important;
            border-bottom: none;
          }
          ::v-deep .el-table td {
            border-bottom: none;
          }

          ::v-deep .el-table::before {
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0px;
          }

          ::v-deep .el-table {
            .el-table__row {
              .el-table__cell {
                // .cell {
                //   div {
                //     color: #fff;
                //     background-color: #0099d5;
                //     text-align: center;
                //     border-radius: 5px;
                //     font-weight: 900;

                //   }

                // }


              }

              // &:nth-child(-n+3) {
              //   .cell {
              //     div {
              //       background-color: #ff560e;

              //     }

              //   }
              // }
            }
          }
          ::v-deep .el-loading-mask {
            background-color: rgba(255, 255, 255, 0);
            
            
              .el-loading-spinner .path {
                stroke: #c23531;
              }
          }
        }
        .bottom-page {
          margin: 20px;
          display: flex;
          justify-content: center;
        }
    }
  }
}
</style>